import React , { useState,useEffect }from "react";
import './App.css'

const Labels = (props) =>{
  console.log(props)
    let [mstate,setMState]=useState(props.msg)
    console.log(mstate)
    function changeMode1(){
        setMState(mstate=false)
    }
    return<div className={mstate?'mask':'none'}>
        <div className="div2">
        <img src={require('./img/close.png')} style={{float:"right"}} onClick={() => changeMode1()}/>
          <div className="div3" style={{}}>
          <h1 style={{color:"#ffffff",fontSize:"20px",fontFamily:"黑体"}}>户型</h1>
          <span style={{color:"#fe615a",fontSize:"12px",marginTop:"5x"}}>3卧室1厅1卫1厨</span>
          </div>
          <div className="div3">
          <h1 style={{color:"#ffffff",fontSize:"20px",fontFamily:"黑体"}}>朝向</h1>
          <span style={{color:"#fe615a",fontSize:"12px",marginTop:"5x"}}>坐北朝南</span>
          </div>
          <div className="div4">
          <h1 style={{color:"#ffffff",fontSize:"15px",fontFamily:"黑体"}}>小区信息</h1>
          </div>
          <div className="div4">
          <p className="fontcolor" style={{marginTop:"5x"}}>绿化率：<span style={{color:"#e3e3e3"}}>30%</span></p>
          <p className="fontcolor" style={{marginTop:"5px"}}>容积率：<span style={{color:"#e3e3e3"}}>2.4</span></p>
          <p className="fontcolor" style={{marginTop:"5px"}}>物业费用：<span style={{color:"#e3e3e3"}}>5.0/月</span></p>
          <div className="div4-1">
          <p className="fontcolor" style={{marginTop:"5px"}}>燃气费用：<span style={{color:"#e3e3e3"}}>2.6元/m³</span></p>
          <p className="fontcolor" style={{marginTop:"5px"}}>固定车位：<span style={{color:"#e3e3e3"}}>750元/月</span></p>
          <p className="fontcolor" style={{marginTop:"5px"}}>物业公司：<span style={{color:"#e3e3e3"}}>XXX服务有限公司</span></p>
          </div>
          </div>
          <div className="div5">
          <p className="fontcolor">小区图集</p>
          <div className="bor">
          <img style={{width:"180px",height:"180px",borderRadius:"10px"}} src={require('./img/xue.jpg')} alt="" />
          <img style={{width:"180px",height:"180px",borderRadius:"10px"}} src={require('./img/xue2.jpg')}alt="" />
          </div>
          </div>
          <div className="div4">
          <p className="fontcolor">采集信息</p>
          <img style={{width:"150px",height:"150px",borderRadius:"10px",float:"right"}} src={require('./img/rs.png')}alt="" />
          <p className="fontcolor1" style={{marginTop:"10px"}}>采集设备：<span style={{color:"#e3e3e3"}}>RS401010</span></p>
          <p className="fontcolor1" style={{marginTop:"10px"}}>深度数据：<span style={{color:"#e3e3e3"}}>850nm Lidar</span></p>
          <p className="fontcolor1" style={{marginTop:"10px"}}>彩色信息：<span style={{color:"#e3e3e3"}}>1024*1024px</span></p>
          <p className="fontcolor1" style={{marginTop:"10px"}}>采集高度：<span style={{color:"#e3e3e3"}}>11.575cm</span></p>
          <p className="fontcolor1" style={{marginTop:"10px"}}>采集人员：<span style={{color:"#e3e3e3"}}>VR手机架</span></p>
          </div>
          <div style={{marginTop:"10%"}}>
          <hr style={{width:"90%",color:"#27241f"}}/>
          <span  className="fontcolor" style={{marginLeft: "30%"}}>于2022年3月14号 拍摄采集</span></div>
          </div>
    </div>
  };
export default Labels;